<script setup lang="ts">
import { useCapital } from "@/stores/capital";
import JInput from "@/components/j-input/index.vue";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
const capital = useCapital();
const router = useRouter();

const onCapital = (item: any) => {
    capital.changeCurCapital(item);
    window.open("/entity/" + item.capitalInfoId);
};
const search = ref("");

const list = computed(() => {
    const key = search.value.toLowerCase();
    if (capital.capitalList && capital.capitalList.length) {
        if (!key) {
            return capital.capitalList;
        }
        return capital.capitalList.filter(i => i.name.toLowerCase().includes(key));
    }
    return [];
});
</script>
<template>
    <div class="ymenu">
        <!-- <v-menu location="bottom">
            <template v-slot:activator="{ props }">
                <VIcon class="ybtn" v-bind="props">mdi mdi-menu-down</VIcon>
            </template>

            <v-list>
                <div class="inp-box">
                    <JInput class="inp-t" v-model="search" @click.stop placeholder="search"></JInput>
                </div>

                <div class="inp-all">
                    <v-list-item v-for="item in list" :key="item.id" @click="onCapital(item)">
                        <v-list-item-title>{{ item.name }}</v-list-item-title>
                    </v-list-item>
                </div>
            </v-list>
        </v-menu> -->
    </div>
</template>
<style lang="scss" scoped>
.ymenu {
    .ybtn {
        width: 30px;
        height: 30px;
        background: #2b3139;
        border-radius: 6px;
    }
}
.inp-box {
    width: 100%;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    .inp-t {
        width: 100%;
    }
    .coin-inp {
        width: 178px;
        height: 32px;
        background: #1e2329;
        border-radius: 8px;
        border: 1px solid #fcc235;
        padding: 10px;
        font-size: 14px;
        outline: none;
    }
}
</style>
